// TODO: 主题配色后期UI更新再定
:root {
  // 亮色主题变量
  --content-primary: #eff1f3;
  --text-primary: #333333;
  --text-secondary: #666666;
  --border-color: #d9d9d9;
  --top-color: #ddd;
  --bottom-color: #d5d5d5;
  --gradient-body-background: linear-gradient(
    180deg,
    var(--top-color) 0%,
    var(--bottom-color) 100%
  );
  --master-color: #f6f6f6;
  --hover-bg: #fff;
  --box-shadow: 14px 14px 40px 0 rgba(158, 158, 158, 0.2);
  --menu-text: #0a1f44;
  --active-text: #0a1f44;
  --border: #ebecf0;
  // input
  --input-bg: #fff;

  // BuildBetter按钮样式
  --button-bg: #fff;
  --button-text: #797979;
  --button-border: #e0e0e0;
  --button-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --button-hover-bg: #ffffff;
  --button-hover-border: #d0d0d0;
  --button-hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  // file exporlor
  --file-explorer-bg: #eee;
  --file-explorer-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15),
    inset 0 -1px 1px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.3);
  // other-button

  }

// 暗色主题变量
html.dark {
  --top-color: #35334f;
  --bottom-color: #24213f;
  // 修复渐变背景在暗色模式下不生效的问题
  --gradient-body-background: linear-gradient(180deg, #35334f 0%, #24213f 100%);
  --body-background: #353251;
  --master-color: #3d3b57;
  --bg-primary: #262b3b;
  --content-primary: #2d3344;
  --text-primary: #fdfdfd;
  --text-secondary: #fefefe;
  --border-color: #666666;
  --hover-bg: #2d3344;
  // input
  --input-bg: #454361;
  // BuildBetter按钮暗色主题样式
  --button-bg: #2d3344;
  --button-text: #ffffff;
  --button-border: #3d3b57;
  --button-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  --button-hover-bg: #353251;
  --button-hover-border: #4a4775;
  --button-hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);

  // 从 themes.scss 迁移的暗色变量
  --box-shadow: 0px 1px 10px 5px #282c34;
  --menu-text: #656568;
  --active-text: rgba(242, 246, 252, 0.8);

  // file exporlor
  --file-explorer-bg: #3a375a;
  --file-explorer-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15),
    inset 0 -1px 1px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.3);

  h2 {
    color: var(--text-primary);
  }
  h3 {
    color: var(--text-secondary);
  }
  p,
  span {
    color: #bbb;
  }
}

// 应用主题变量
body {
  background: var(--gradient-body-background);
  color: var(--text-primary);
  transition:
    background 0.3s ease,
    color 0.3s ease !important;
}
@import './components/build-better.scss';
@import './components/button.scss';
